<template>
    <div>
        <h3>不同的对齐方向</h3>
        <div class="flex col">
            <p>1..</p>
            <p class="self">2..</p>
            <p>3..</p>
            <p>4..</p>
            <p>5..</p>
        </div>
    </div>
</template>

<style scoped>
.flex{
    display: flex;
    background: #03A9F4;
    width: 100px;
    height: 100px;
    color: black;
}
.col{
    flex-wrap: wrap;
    align-items: flex-end;
}
.flex p{
    background:#FFEB3B;
    margin: 2px;
}
.self{
    align-self: flex-start;
}
</style>